<template>
  <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
    <FormItem prop="user">
      <Input type="text" v-model="formInline.user" placeholder="Username">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="Password">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <!--      <FormItem prop="yzm">
              <Input type="text" v-model="formInline.yzm" placeholder="码">
              </Input>
          </FormItem>-->
    <FormItem>
      <div v-html="arr1" @click="getlist2"></div>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
    </FormItem>

    <router-link tag="a" to="/register">
      注册
    </router-link>
  </Form>

</template>
<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        password: '',
        yzmL: ''
      },
      ruleInline: {
        user: [
          {required: true, message: 'Please fill in the user name', trigger: 'blur'}
        ],
        yzm: [
          {required: true, message: 'Please fill in the user name', trigger: 'blur'}
        ],
        password: [
          {required: true, message: 'Please fill in the password.', trigger: 'blur'},
          {type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur'}
        ]
      },
      arr1: ''
    }
  },
  mounted () {
    //  this.getlist2()
  },
  methods: {
    getlist2 () {
      this.$axios.get('api/yzm').then(res => {
        this.arr1 = res.data.data
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios.post('api/login', {
            username: this.formInline.user,
            password: this.formInline.password
            //   yzm:this.formInline.yzm,
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.error('登录成功')
              localStorage.setItem('token', res.data.data.token)
              localStorage.setItem('id', JSON.stringify(res.data.data))
              this.$router.push('/')
            } else {
              this.$Message.error(res.data.message)
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>
